<template>
    <div id="modifyInformation">
        <div class="title">基本信息修改</div>
        <div class="content">
            <div id="information" class="header">
                <div class="left">头像：</div>
                <img src="../../image/touxiang.png" alt="" class="center">
                <div class="right">
                    <div class="top">
                        <div :class="selectActive==0?'select':''" @click="selectClick(0)">选取文件</div>
                        <div :class="selectActive==1?'select':''" @click="selectClick(1)">未选取文件</div>
                    </div>
                    <div class="bottom">建议头像尺寸为300*300像素，</div>
                    <div class="bottom">格式为jpg、jpeg,大小不超过2M</div>
                </div>
            </div>
            <div id="information" class="gender">
                <div class="left">性别：</div>
                <div class="right">
                    <el-radio v-model="genderRadio" size="medium" text-color="#333" fill="#fff" label="1" @change="genderChange(1)">男</el-radio>
                    <el-radio v-model="genderRadio" size="medium" text-color="#333" fill="#fff" label="2" @change="genderChange(2)">女</el-radio>
                </div>
            </div>
            <div id="information" class="username">
                <div class="left">用户名：</div>
                <el-input v-model="usernameInput" placeholder="请输入用户名" class="right"></el-input>
            </div>
            <div id="information" class="name">
                <div class="left">姓名：</div>
                <el-input v-model="nameInput" placeholder="请输入姓名" class="right"></el-input>
            </div>
            <div id="information" class="card">
                <div class="left">身份证号：</div>
                <el-input v-model="cardInput" placeholder="请输入身份证号" class="right"></el-input>
            </div>
            <div class="button">保存修改</div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            selectActive: 0, // 是否选中文件
            genderRadio: "0", // 性别选择
            usernameInput: "顺义文化馆", // 用户名输入值
            nameInput: "刘强", // 姓名输入值
            cardInput: "1010302198507086780", // 身份证号输入值
        };
	},
    mounted(){},
	methods: {
        // 切换是否选中文件
        selectClick(index){
           this.selectActive = index
        },
        // 性别选择
        genderChange(event){
            // console.log(event)
			this.genderRadio == event
		},
    },
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){    
    #modifyInformation{
        padding: 3% 5%;
        font-size: 16px;
        .title{
            width: 100%;
            padding-bottom: 2%;
            font-size: 24px;
            border-bottom: 1px solid #ddd;
        }
        .content{
            #information{
                width: 60%;
                margin-left: 20%;
                display: flex;
                align-items: center;
            }
            // 头像
            .header{
                margin-top: 5%;
                .left{
                    width: 25%;
                    text-align: right;
                }
                .center{
                    width: 17%;
                    margin: 0% 3%;
                }
                .right{
                    font-size: 12px;
                    .top{
                        display: flex;
                        color: #888888;
                        margin-bottom: 1%;
                        .select{
                            padding: 0% 3%;
                            text-align: center;
                            border: 1px solid #888888;
                            border-radius: 4px;
                            margin: 0% 3%;
                        }
                        .selectActive{
                            padding: 0% 3%;
                            text-align: center;
                            border-radius: 4px;
                            margin: 0% 3%;
                        }
                    }
                    .bottom{
                        color: #F39E2A;
                    }
                }
            }
            // 性别
            .gender{
                margin-top: 3%;
                display: flex;
                .left{
                    width: 25%;
                    text-align: right;
                }
                .right{
                    font-size: 22px;
                }
            }
            // 用户名、姓名、身份证号
            .username,.name,.card{
                margin-top: 3%;
                display: flex;
                .left{
                    width: 25%;
                    text-align: right;
                }
                .right{
                    width: 70%;
                }
            }
            // 保存修改
            .button{
                width: 20%;
                margin: 10% 0% 0% 40%;
                text-align: center;
                border-radius: 5px;
                padding: 1% 0%;
                font-size: 18px;
                color: white;
                background: #F39E2A;
            }
        }
    }
}



@media screen and (max-width: 1400px){    
    #modifyInformation{
        padding: 2% 4%;
        font-size: 14px;
        .title{
            width: 100%;
            padding-bottom: 2%;
            font-size: 22px;
            border-bottom: 1px solid #ddd;
        }
        .content{
            #information{
                width: 60%;
                margin-left: 20%;
                display: flex;
                align-items: center;
            }
            // 头像
            .header{
                margin-top: 4%;
                .left{
                    width: 22%;
                    text-align: right;
                }
                .center{
                    width: 15%;
                    margin: 0% 2%;
                }
                .right{
                    font-size: 10px;
                    .top{
                        display: flex;
                        color: #888888;
                        margin-bottom: 1%;
                        .select{
                            padding: 0% 2%;
                            text-align: center;
                            border: 1px solid #888888;
                            border-radius: 4px;
                            margin: 0% 3%;
                        }
                        .selectActive{
                            padding: 0% 2%;
                            text-align: center;
                            border-radius: 4px;
                            margin: 0% 3%;
                        }
                    }
                    .bottom{
                        color: #F39E2A;
                    }
                }
            }
            // 性别
            .gender{
                margin-top: 2%;
                display: flex;
                .left{
                    width: 22%;
                    text-align: right;
                }
                .right{
                    font-size: 20px;
                }
            }
            // 用户名、姓名、身份证号
            .username,.name,.card{
                margin-top: 2%;
                display: flex;
                .left{
                    width: 22%;
                    text-align: right;
                }
                .right{
                    width: 70%;
                }
            }
            // 保存修改
            .button{
                width: 20%;
                margin: 8% 0% 0% 35%;
                text-align: center;
                border-radius: 5px;
                padding: 1% 0%;
                font-size: 16px;
                color: white;
                background: #F39E2A;
            }
        }
    }
}
</style>